<template>
	<div class="schedule-container">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>排片管理</span>
				<el-button type="primary" size="small" style="float: right" @click="handleAdd">
					<i class="el-icon-plus"></i> 添加排片
				</el-button>
			</div>

			<!-- 搜索表单 -->
			<el-form :inline="true" :model="searchForm" class="search-form">
				<el-form-item label="电影">
					<el-select v-model="searchForm.movieId" placeholder="请选择电影" clearable>
						<el-option v-for="item in movieOptions" :key="item.id" :label="item.name"
							:value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="影院">
					<el-select v-model="searchForm.cinemaId" placeholder="请选择影院" clearable
						@change="handleCinemaChange(searchForm.cinemaId)">
						<el-option v-for="item in cinemaOptions" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="影厅">
					<el-select v-model="searchForm.hallId" placeholder="请选择影厅" clearable>
						<el-option v-for="item in hallOptions" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="日期">
					<el-date-picker v-model="searchForm.date" type="date" placeholder="选择日期"
						value-format="yyyy-MM-dd" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSearch">
						<i class="el-icon-search"></i> 搜索
					</el-button>
					<el-button @click="resetSearch">
						<i class="el-icon-refresh"></i> 重置
					</el-button>
				</el-form-item>
			</el-form>

			<!-- 日历视图 -->
			<div class="calendar-container">
				<div class="calendar-header">
					<el-button-group>
						<el-button size="small" @click="changeMonth(-1)">
							<i class="el-icon-arrow-left"></i>
						</el-button>
						<el-button size="small">{{ currentYear }}年 {{ currentMonth + 1 }}月</el-button>
						<el-button size="small" @click="changeMonth(1)">
							<i class="el-icon-arrow-right"></i>
						</el-button>
					</el-button-group>
				</div>

				<div class="calendar-body">
					<div class="weekdays">
						<div v-for="day in weekDays" :key="day" class="weekday">{{ day }}</div>
					</div>
					<div class="days">
						<div v-for="(day, index) in calendarDays" :key="index" class="day" :class="{
                'other-month': !day.currentMonth,
                'today': day.isToday,
                'has-schedule': day.schedules && day.schedules.length > 0
              }" @click="handleDayClick(day)">
							<span class="day-number">{{ day.date.getDate() }}</span>
							<div v-if="day.schedules && day.schedules.length > 0" class="schedule-list">
								<div v-for="schedule in day.schedules" :key="schedule.id" class="schedule-item"
									:class="schedule.status" @click.stop="handleScheduleClick(schedule)">
									<span class="movie-name">{{ schedule.movieName }}</span>
									<span class="time">{{ schedule.startTime }}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 添加/编辑排片对话框 -->
			<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px" :close-on-click-modal="false"
				custom-class="dark-dialog">
				<el-form ref="form" :model="form" :rules="rules" label-width="100px">
					<el-form-item label="电影" prop="movie">
						<el-select v-model="form.movie" placeholder="请选择电影" style="width: 100%"
							@change="handleMovieChange(form.movie)">>
							<el-option v-for="item in movieOptions" :key="item.id" :label="item.name+'-'+item.stars"
								:value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item label="电影院" prop="movie">
						<el-select v-model="form.cinema" placeholder="请选择电影院" style="width: 100%"
							@change="handleCinemaChange(form.cinema)">
							<el-option v-for="item in cinemaOptions" :key="item.id" :label="item.name"
								:value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item label="影厅" prop="hall">
						<el-select v-model="form.hall" placeholder="请选择影厅" style="width: 100%">
							<el-option v-for="item in hallOptions" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item label="日期" prop="date">
						<el-date-picker v-model="form.date" type="date" placeholder="选择日期" style="width: 100%"
							value-format="yyyy-MM-dd" />
					</el-form-item>
					<el-form-item label="开始时间" prop="startTime">
						<el-time-picker v-model="form.startTime" placeholder="选择开始时间" style="width: 100%" format="HH:mm"
							value-format="HH:mm" @change="handleTimeChange(form.startTime)" />
					</el-form-item>
					<el-form-item label="结束时间" prop="endTime">
						<el-time-picker v-model="form.endTime" placeholder="选择结束时间" style="width: 100%" format="HH:mm"
							value-format="HH:mm" /><!-- readonly -->
					</el-form-item>
					<el-form-item label="票价" prop="price">
						<el-input-number v-model="form.price" :min="0" :precision="2" :step="10" style="width: 100%" />
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="handleSubmit">确 定</el-button>
				</div>
			</el-dialog>
		</el-card>
	</div>
</template>

<script>
import {
		findCurrentReleaseMovieApi
	} from '@/api/movie'
	
	import {
		findAllCinemaApi,
		findHallsByCinemaApi,
		scheduleAddApi
	} from '@/api/cinema'


	export default {
		name: 'Schedule',
		data() {
			return {
				searchForm: {
					movieId: '',
					cinemaId: '',
					hallId: '',
					date: ''
				},
				movieOptions: [],
				cinemaOptions: [],
				hallOptions: [],
				currentDate: new Date(),
				weekDays: ['日', '一', '二', '三', '四', '五', '六'],
				calendarDays: [],
				dialogVisible: false,
				dialogTitle: '',
				movieMap: [],
				movie: '',
				form: {
					movie: '',
					movieName: '',
					hall: '',
					date: '',
					startTime: '',
					endTime: '',
					price: 0
				},
				rules: {
					movieId: [{
						required: true,
						message: '请选择电影',
						trigger: 'change'
					}],
					hallId: [{
						required: true,
						message: '请选择影厅',
						trigger: 'change'
					}],
					date: [{
						required: true,
						message: '请选择日期',
						trigger: 'change'
					}],
					startTime: [{
						required: true,
						message: '请选择开始时间',
						trigger: 'change'
					}],
					endTime: [{
						required: true,
						message: '请选择结束时间',
						trigger: 'change'
					}],
					price: [{
						required: true,
						message: '请输入票价',
						trigger: 'blur'
					}]
				},
				mockSchedules: []
			}
		},
		computed: {
			currentYear() {
				return this.currentDate.getFullYear()
			},
			currentMonth() {
				return this.currentDate.getMonth()
			}
		},
		created() {
				this.initCalendar();
				this.handleReleaseMovie(20);
				this.handleFindAllCinemas();
		},
		methods: {	
			/**
			 * 初始化日历
			 */
			initCalendar() {
				const year = this.currentDate.getFullYear()
				const month = this.currentDate.getMonth()
				const firstDay = new Date(year, month, 1)
				const lastDay = new Date(year, month + 1, 0)
				const daysInMonth = lastDay.getDate()
				const startingDay = firstDay.getDay()

				this.calendarDays = []
				// 添加上个月的日期
				const prevMonthLastDay = new Date(year, month, 0).getDate()
				for (let i = startingDay - 1; i >= 0; i--) {
					this.calendarDays.push({
						date: new Date(year, month - 1, prevMonthLastDay - i),
						currentMonth: false,
						isToday: false,
						schedules: []
					})
				}

				// 添加当前月的日期
				const today = new Date()
				for (let i = 1; i <= daysInMonth; i++) {
					this.calendarDays.push({
						date: new Date(year, month, i),
						currentMonth: true,
						isToday: year === today.getFullYear() &&
							month === today.getMonth() &&
							i === today.getDate(),
						schedules: []
					})
				}

				// 添加下个月的日期
				const remainingDays = 42 - this.calendarDays.length
				for (let i = 1; i <= remainingDays; i++) {
					this.calendarDays.push({
						date: new Date(year, month + 1, i),
						currentMonth: false,
						isToday: false,
						schedules: []
					})
				}
			},
			/** 改变月
			 * @param {Object} offset
			 */
			changeMonth(offset) {
				this.currentDate = new Date(
					this.currentDate.getFullYear(),
					this.currentDate.getMonth() + offset,
					1
				)
				this.initCalendar()
				this.fetchSchedules()
			},
			
			
			handleDayClick(day) {
				if (!day.currentMonth) return
				this.form.date = this.formatDate(day.date)
				this.dialogTitle = `添加排片 - ${this.formatDate(day.date)}`
				this.dialogVisible = true
			},
			handleScheduleClick(schedule) {
				// 处理排片点击事件
				console.log('点击排片:', schedule)
			},
			handleAdd() {
				this.form = {
					movieId: '',
					hallId: '',
					date: '',
					startTime: '',
					endTime: '',
					price: 0
				}
				this.dialogTitle = '添加排片'
				this.dialogVisible = true
			},
			
			resetSearch() {
				this.searchForm = {
					movieId: '',
					hallId: '',
					date: ''
				}
			},
			formatDate(date) {
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				return `${year}-${month}-${day}`
			},
			handleMovieChange(movieId) {
				// console.dir(this.movieMap.get(movieId), {
				// 	depth: null
				// });
				

			},
			async handleReleaseMovie(pageSize) {
				let {data} = await findCurrentReleaseMovieApi(pageSize);
				this.movieOptions = data.results;
			},
			async handleFindAllCinemas(){
				let {data} = await findAllCinemaApi();
				this.cinemaOptions = data.results;
			},
			//根据影院id查询影厅
			async handleCinemaChange(cinemaId){
				let {data} = await findHallsByCinemaApi(cinemaId);
				this.hallOptions = data.results;
			},
			async handleSubmit(){
				console.log(this.form);
				let {data} = await scheduleAddApi(this.form);
				alert(data.msg);
			}

		}
	}
</script>

<style>
	.el-select-dropdown {
		background: #25262b;
	}

	.el-select-dropdown__item {
		color: #b0bed4;
	}

	.el-picker-panel {
		background: #25262b;
		color: ghostwhite;
	}


</style>

<style scoped>
	.schedule-container {
		padding: 20px;
	}

	.search-form {
		margin-bottom: 20px;
		padding: 20px;
		background: #25262b;
		border-radius: 4px;
		border: 1px solid #2d2e33;
	}



	.calendar-header {
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
	}

	.weekdays {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 10px;
		margin-bottom: 10px;
	}

	.weekday {
		text-align: center;
		color: #a7a9b2;
		font-weight: 500;
		padding: 10px;
	}

	.days {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 10px;
	}

	.day {
		min-height: 120px;
		background: #2e3038;
		border-radius: 4px;
		padding: 10px;
		cursor: pointer;
		transition: all 0.3s;
		border: 1px solid #2d2e33;
	}

	.day:hover {
		background: #2d2e33;
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	}

	.day-number {
		font-size: 16px;
		font-weight: 500;
		color: #e0e0e0;
		margin-bottom: 8px;
		display: block;
	}

	.other-month {
		opacity: 0.5;
	}

	.today {
		background: #2d2e33;
		border-color: #409EFF;
	}

	.today .day-number {
		color: #409EFF;
	}

	.schedule-list {
		margin-top: 8px;
		background-color: beige;
		
		
	}

	.schedule-item {
		font-size: 12px;
		padding: 4px 8px;
		margin-bottom: 4px;
		border-radius: 4px;
		background: rgba(64, 158, 255, 0.1);
		color: #409EFF;
		cursor: pointer;
		transition: all 0.3s;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.schedule-item:hover {
		background: rgba(64, 158, 255, 0.2);
	}

	.schedule-item.upcoming {
		background: rgba(230, 162, 60, 0.1);
		color: #E6A23C;
	}

	.schedule-item.showing {
		background: rgba(103, 194, 58, 0.1);
		color: #67C23A;
	}

	.schedule-item.ended {
		background: rgba(144, 147, 153, 0.1);
		color: #909399;
	}

	.movie-name {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.time {
		margin-left: 8px;
		color: inherit;
		opacity: 0.8;
	}

	:deep(.el-dialog) {
		background: #25262b;
		border: 1px solid #2d2e33;
	}

	:deep(.el-dialog__title) {
		color: #e0e0e0;
	}

	:deep(.el-dialog__body) {
		color: #e0e0e0;
	}

	:deep(.el-dialog__footer) {
		border-top: 1px solid #2d2e33;
	}

	:deep(.el-form-item__label) {
		color: #a7a9b2;
	}

	:deep(.el-input__inner) {
		background: #1d1e23;
		border-color: #2d2e33;
		color: #e0e0e0;
	}

	:deep(.el-select-dropdown) {
		background: #25262b;
		border-color: #2d2e33;
	}

	:deep(.el-select-dropdown__item) {
		color: #e0e0e0;
	}

	:deep(.el-select-dropdown__item.hover),
	:deep(.el-select-dropdown__item:hover) {
		background: #2d2e33;
		color: #409EFF;
	}

	:deep(.el-card) {
		background: #25262b;
		border: 1px solid #2d2e33;
	}

	:deep(.el-card__header) {
		border-bottom: 1px solid #2d2e33;
		padding: 15px 20px;
	}

	:deep(.el-card__header span) {
		color: #e0e0e0;
		font-size: 16px;
	}

	:deep(.el-card__body) {
		background: #25262b;
	}
</style>